I'm trying to create an example boilerplate for a library of reusable components in TypeScript, using Ant Design for UI elements and Rollup for bundling.
The Ant Design documentation although useful, doesn't give specific details for configuring Rollup and I've not had any luck finding an example using the same technology stack.
Using information from various online sources I've put together an outline boilerplate and published it to the following GitHub repository
However, the build output is showing a number of warnings from Rollup relating to rewriting references to 'this'. Can anyone suggest changes to my build config to resolve this issue?
(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en#error-this-is-undefined
node_modules\antd\es\affix\index.js
6: import _inherits from "babel-runtime/helpers/inherits";
7: import _typeof from "babel-runtime/helpers/typeof";
8: var __decorate = this && this.__decorate || function (decorators, target, key, desc) {
^
9: var c = arguments.length,
10: r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
...
Pedro Arantes :
@Steve, I don't know if you already solved this problem, but I found a solution that worked for me using rollup-plugin-babel:\n\nimport babel from 'rollup-plugin-babel';\nimport commonjs from 'rollup-plugin-commonjs';\nimport nodeResolve from 'rollup-plugin-node-resolve';\nimport peerDepsExternal from 'rollup-plugin-peer-deps-external';\nimport postcss from 'rollup-plugin-postcss';\nimport typescript from 'rollup-plugin-typescript2';\nimport url from 'rollup-plugin-url';\n\nimport pkg from './package.json';\n\nconst antdVars = require('./src/antd-vars');\n\nexport default {\n input: 'src/index.tsx',\n output: [\n {\n file: pkg.main,\n format: 'cjs',\n exports: 'named',\n sourcemap: true,\n },\n {\n file: pkg.module,\n format: 'es',\n exports: 'named',\n sourcemap: true,\n },\n ],\n plugins: [\n peerDepsExternal(),\n url(),\n nodeResolve({\n extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],\n }),\n typescript({\n exclude: ['*.d.ts', '**/*.d.ts', '**/*.story.tsx', '**/*.spec.tsx'],\n rollupCommonJSResolveHack: true,\n clean: true,\n }),\n babel({\n babelrc: false,\n plugins: [['import', { libraryName: 'antd', style: true }]],\n extensions: ['.js', '.jsx', '.ts', '.tsx'],\n exclude: /\\**node_modules\\**/,\n }),\n commonjs({\n include: /\\**node_modules\\**/,\n }),\n postcss({\n extensions: ['.css', '.scss', '.less'],\n use: ['sass', ['less', { javascriptEnabled: true, modifyVars: antdVars }]],\n }),\n ],\n};\n",
2019-07-14T19:37:09